<template>
	<a class="btn btn-success" :href="downloadSourceCode(groupId)">
		<span class="fa fa-download"></span>
		{{ $t('download_source_code') }}
	</a>


	<table class="table table-hover" v-if="tasks">
		<thead>
			<tr>
				<th>{{ $t('title') }}</th>
				<th>{{ $t('my_status') }}</th>
				<th>{{ $t('duration') }}</th>
				<th>{{ $t('status') }}</th>
				<th>{{ $t('operation') }}</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in tasks" :key="item.id" @click="toTaskPage(item.id)"
				@contextmenu.prevent="toTaskPage(item.id, true)">
				<td class="link-color">
					{{ item.title }}
				</td>
				<td>
					<div class="progress">
						<div :class="['progress-bar', item.progressClass]" :style="item.progressStyle">
							{{ item.progressText }}
						</div>
					</div>
				</td>
				<td>
					{{ item.startTime }} &nbsp;-->&nbsp; {{ item.stopTime }}
				</td>
				<td :style="'color: ' + item.statusColor">
					{{ $t(item.statusName) }}
				</td>
				<th>
					<a class="btn btn-success" :href="downloadResult(item.id)">
						<span class="fa fa-download"></span>
						{{ $t('download_results') }}
					</a>
				</th>
			</tr>
		</tbody>
	</table>
</template>

<script type="module">
import { GroupService, ContestStatusService } from '@/common/common.object'

export default {
	inject: ['groupId', 'group'],
	data() {
		return {
			tasks: null,
		};
	},
	created() {
		GroupService.getTasks(this.groupId).then(result => {
			ContestStatusService.processes(result);

			ContestStatusService.processProgress(result);

			this.tasks = Object.freeze(result);
		});
	},
	methods: {
		toTaskPage(tasksId, onNewPage = false) {
			this.$toPage(Router.page.contest.index(tasksId), onNewPage);
		},
		downloadSourceCode(groupId) {
			return "/groups/members/source_codes/download?id=" + groupId;
		},
		downloadResult(tasksId) {
			return '/group/tasks/result/download?id=' + tasksId;
		},
	},
}
</script>

<style scope>
table {
	box-sizing: none;
}

table>thead>tr>th {
	border-top: none !important;
}

table>tbody>tr {
	cursor: pointer;
}

table>tbody>tr>td {
	vertical-align: middle !important;
}
</style>
